<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>进度条</title>
</head>
<body>
    <div class="container">
        <!-- .progress创建基础进度条 -->
        <!-- . bg-secondary控制进度条的背景颜色 -->
        <div class="progress mt-4 bg-secondary">
            <!-- .progress-bar进度条填充颜色的部分 -->
            <!-- 进度条的进度通过css的宽度来控制 -->
            <div class="progress-bar" style="width: 80%;"></div>
        </div>
        <!-- 进度条高度通过CSS的高度属性来调整 -->
        <div class="progress mt-4 bg-secondary" style="height: 30px;">
            <!-- .progress-bar进度条填充颜色的部分 -->
            <!-- 进度条的进度通过css的宽度来控制 -->
            <div class="progress-bar bg-success" style="width: 80%;">80%</div>
        </div>
        <!-- 条纹进度条 -->
        <div class="progress mt-4  bg-secondary">
            <!--  role="progressbar"告诉搜索引擎这是一个进度条 -->
            <!-- .progress-bar-striped条纹进度条 -->
            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 80%;"></div>
        </div>

        <div class="progress mt-4  bg-secondary">
            <!-- .progress-bar-animated带动画的条纹进度条 -->
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 80%;"></div>
        </div>

        <!-- 多进度条 -->
        <div class="progress mt-4 bg-secondary">
            <!-- 多个progress-bar放在同一个progress中会自动拼接在一起 -->
            <div class="progress-bar bg-warning" style="width: 10%;"></div>
            <div class="progress-bar bg-danger" style="width: 15%;"></div>
            <div class="progress-bar bg-info" style="width: 40%;"></div>
        </div>

    </div>
    
</body>
</html>